<!--
 * @Author: 赵京涛 z19472333952022@163.com
 * @Date: 2024-10-08 09:40:41
 * @LastEditors: 赵京涛 z19472333952022@163.com
 * @LastEditTime: 2024-10-08 09:40:41
 * @projectName: HeBeiHaiYangData
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki
-->
<template>
  <div class="loginBox">
    <main class="loginBox__bg">
      <div class="loginBox__bg__left">
        <div class="loginBox__bg__left-logo" />
        <div class="login-txt">海洋生态环境监测与分析系统</div>
      </div>
      <section class="loginBox__bg__right">
        <h4 class="no-margins">欢迎登录</h4>
        <el-form
          ref="loginForm"
          hide-required-asterisk
          label-position="top"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <el-form-item prop="username" label="用户名">
            <div class="txtb">
              <el-input
                v-model="loginForm.username"
                type="text"
                placeholder="请输入用户名"
                autocomplete="off"
                :class="{ focus: add }"
                @focus="add = true"
                @blur="add = loginForm.username!==''"
                @keyup.enter.native="handleLogin"
              />
            </div>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <div class="txtb">
              <el-input
                ref="password"
                :key="passwordType"
                v-model="loginForm.password"
                autocomplete="off"
                placeholder="请输入登录密码"
                :type="passwordType"
                :class="{ focus: add1 }"
                @focus="add1 = true"
                @blur="add1 = loginForm.password!==''"
                @keyup.enter.native="handleLogin"
              />
              <!-- 密码 -->
              <span
                v-if="loginForm.password"
                class="show-pwd iconfont"
                @click="showPwd"
                v-html="passwordType === 'password' ? '&#xe603;' : '&#xe602;'"
              />
            </div>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item prop="code" class="verificationCode__box" label="验证码">
            <div class="verifCode_box">
              <el-input
                v-model="loginForm.code"
                type="text"
                placeholder="请输入验证码"
                autocomplete="off"
                :class="{ focus: add2 }"
                @focus="add2 = true"
                @blur="add2 = loginForm.code!==''"
                @keyup.enter.native="handleLogin"
              />
            </div>
            <div
              class="verification__imageBox flex-container"
              @click="switchCodeHandler"
            >
              <!-- 这里放验证码 -->
              <img class="imgBox_container" :src="switchCodeImg" alt="">
            </div>
          </el-form-item>
          <el-form-item class="regist_pasword" style="margin-top: 10px">
            <el-checkbox label="记住密码" />
          </el-form-item>
          <el-form-item class="loginbtn__el-form-item">
            <el-button
              class="loginbtn w-70"
              :loading="loading"
              type="primary"
              @click="handleLogin"
            >{{ loginText }}</el-button>
          </el-form-item>
        </el-form>
      </section>
    </main>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        sidentify: '',
        code: '' // 验证码字段
      },
      switchCodeImg: '', // 验证码图片
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
            validator: ''
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur',
            validator: ''
          }
        ],
        sidentify: [{ required: true, trigger: 'blur', validator: '' }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      loginText: '登  录',
      add: false,
      add1: false,
      add2: false,
      identifyCode: '',
      identifyCodes: '1234567890'
    }
  },
  watch: {},
  created() {
    this.$nextTick(() => {
      this.switchCodeHandler()
    })
  },
  mounted() {},
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.loginText = '登录中  . . . '
          this.$store
            .dispatch('user/login', this.loginForm)
            .then((data) => {
              sessionStorage.setItem('roleId', data.userTypeId)
              window.localStorage.setItem('roleId', data.userTypeId)
              this.loading = false
              this.loginText = '已 登 录'
              this.$router.push({ path: '/' })
            })
            .catch(() => {
              this.loading = false
              this.loginText = '登  录'
              this.switchCodeHandler()
              this.loginForm.code = ''
            })
        } else {
          return false
        }
      })
    },
    /**
     * 切换显示验证码
     */
    async switchCodeHandler() {
      const info = {
        h: 60,
        V1: 4,
        w: 175
      }
      const randomNum = Math.floor(Math.random() * 10 + 1)
      this.switchCodeImg = `${process.env.VUE_APP_BASE_API}` + `/admin/user/getVerify.do?h=${info.h}&V1=${info.V1}&w=${info.w}&random=${randomNum}`
    }
  }
}
</script>

<style lang="scss">
@import "~@/assets/styles/login.scss";
#app {
  width: 100%;
  height: 100%;
  .loginBox {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("~@/assets/images/login-bg-new.png");
    background-repeat: no-repeat;
    background-size: cover;
    &__bg {
      width: 80vw;
      height: 70vh;
      margin: 0;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); // 添加阴影效果
      background-image: url("~@/assets/images/BDH-content-bg.png");
      background-repeat: no-repeat;
      background-size: 110% 112%; // 确保背景图片填充整个盒子
      background-position: center;
      object-fit: contain;
      box-sizing: border-box;
      position: relative;
      &__left {
        position: absolute;
        left: 2vw;
        bottom: 20vh;
        width: 42vw;
        height: 10vh;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        &-logo {
          display: inline-block;
          width: 4.4vw;
          height: 4.4vw;
          background: url('~@/assets/images/logo_header.png') no-repeat 0 0;
          background-size: 96% 96%;
        }
      }
      &__right {
        position: absolute;
        height: 116%;
        width: 28vw;
        right: 4vw;
        top: -6vh;
        background-color: #ffffff;
        padding: 60px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }
  .loginbtn {
    height: 48px;
    letter-spacing: 5px;
    padding-right: 10px;
    border-radius: 4px;
    background-color: #1773d3 !important;
    width: 100%;
  }
  .loginbtn > span {
    font-size: 18px;
  }
}
</style>
